<template>
  <div class="presentation-wrapper">
    <div class="presentation-header" ref="headerRef">
      <router-link to="/">
        <div class="header-left">
          <span>长不胖的麦兜</span>
        </div>
      </router-link>
      <div class="header-right">
        <div class="header-right-nav">
          <Menu v-model="currentMenu" mode="horizontal">
            <MenuItem name="/" to="/">首页</MenuItem>
            <MenuItem name="nav" to="/nav">导航 </MenuItem>
            <MenuItem name="life" to="/life">生活</MenuItem>
            <MenuItem name="friends" to="/friends">友联</MenuItem>
            <MenuItem name="friends" to="/about">关于我</MenuItem>
            <MenuItem name="git" to="/github">Github</MenuItem>
          </Menu>
        </div>
        <div class="header-right-icon">
          <i class="iconfont icon-sun" v-show="isNight" @click="dayAndNightClick"></i>
          <i class="iconfont icon-moon" v-show="!isNight" @click="dayAndNightClick"></i>
          <Input icon="search" transition />
        </div>
      </div>
    </div>
    <div class="presentation-article" v-if="$route.path === '/'">
      <div class="presentation-article_box">
        <div class="presentation-content" v-for="item in postList" :key="item.id">
          <div class="presentation-content_item" @click="toDetailClick(item.id)">
            <ul class="classify-item">
              <li>{{ item.createTime | timeToDate }}</li>
              <li class="classify-li" @click.stop="toClassifysClick">{{ item.classify }}</li>
            </ul>
            <div class="title-content">
              <div class="content">
                <h2 class="title">{{ item.title }}</h2>
                <p>{{ item.description }}</p>
              </div>
              <div class="img" v-if="item.imgUrl">
                <img :src="item.imgUrl" alt="" />
              </div>
            </div>
            <div class="options">
              <i class="iconfont icon-eye"><span>212</span></i>
              <i class="iconfont icon-dianzan"><span>142</span></i>
              <i class="iconfont icon-pinglun"><span>11</span></i>
            </div>
          </div>
        </div>
      </div>
      <div class="presentation-nav_box">
        <div class="presentation-nav">
          <div class="presentation-nav_item">
            <User />
          </div>
          <div class="presentation-nav_item">
            <Recommend />
          </div>
          <div class="presentation-nav_item">
            <Tag />
          </div>
          <div class="presentation-nav_item">
            <p class="tc">©2021 Copyright|渝ICP备19004190号</p>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
import storage from '../../utils/storage'
import User from './user.vue'
import Tag from './tag.vue'
import Recommend from './recommend.vue'
export default {
  data() {
    return {
      isNight: false,
      currentMenu: '/'
    }
  },
  components: {
    User,
    Tag,
    Recommend
  },
  methods: {
    // 日间模式、夜间模式切换
    dayAndNightClick() {
      this.isNight = !this.isNight
      if (this.isNight) {
        storage.setItem('theme', 'night')
      } else {
        storage.setItem('theme', 'day')
      }
      storage.setItem('theme-active', this.isNight)
      window.document.documentElement.setAttribute('data-theme', storage.getItem('theme'))
    },

    // 详情页
    toDetailClick(id) {
      this.$router.push({ name: 'post', params: { id } })
    },

    // 主题初始化
    initTheme() {
      if (!storage.getItem('theme') || storage.getItem('theme-active')) {
        const time = Number(new Date().toTimeString().slice(0, 2))
        if (time <= 20 && time >= 6) {
          storage.setItem('theme', 'day')
          storage.setItem('theme-active', false)
        } else {
          storage.setItem('theme', 'night')
          storage.setItem('theme-active', true)
        }
      }
      this.isNight = storage.getItem('theme-active')
      window.document.documentElement.setAttribute('data-theme', storage.getItem('theme'))
    },

    // 分类筛选
    toClassifysClick() {}
  },
  mounted() {
    this.$store.dispatch('getPostList')
    this.initTheme()
  },
  computed: {
    postList() {
      return this.$store.getters.getPostList
    }
  },
  created() {
    this.currentMenu = this.$route.name
  }
}
</script>
